@extends('admin.layout.layout')

@section('content')
<div class="layui-fluid">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-xs6 layui-col-md10">
      <!-- 填充内容 -->
      <div class="layui-card">
        <div class="layui-card-header">
          列表
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="datatable"></table>
            <script type="text/html" id="toolbars">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm">添加栏目</button>
              </div>
            </script>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header">目录</div>
        <div class="layui-card-body">
          <ul id="tree" class="ztree" style="overflow:auto;"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('css')
<link rel="stylesheet" href="/admin_access/plugins/zTreew/css/metroStyle/metroStyle.css" type="text/css">
@endsection

@section('js')
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
  var zNodes = [{!!$tree!!}];
  layui.use(['form','table'],function(){
    var table = layui.table;

    //执行一个 table 实例
    table.render({
      elem: '#datatable'
      //,height: 420
      ,url: '/demo/table/user/' //数据接口
      ,title: '栏目列表'
      ,page: true //开启分页
      ,toolbar: '#toolbars' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      ,totalRow: true //开启合计行
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'username', title: '用户名', width:80}
        ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
        ,{field: 'sex', title: '性别', width:80, sort: true}
        ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
        ,{field: 'city', title: '城市', width:150} 
        ,{field: 'sign', title: '签名', width: 200}
        ,{field: 'classify', title: '职业', width: 100}
        ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
      ]]
    });

     //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
      ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          layer.msg('添加');
        break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
          }
        break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
        break;
      };
    });
    
    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
      ,layEvent = obj.event; //获得 lay-event 对应的值
      if(layEvent === 'detail'){
        layer.msg('查看操作');
      } else if(layEvent === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){
        layer.msg('编辑操作');
      }
    });
  });
</SCRIPT>
<script type="text/javascript" src="/admin_access/plugins/zTreew/tree.js"></script>

@endsection